import React, {Component, PropTypes} from 'react';
import './index.css';
import {SketchPicker, PhotoshopPicker} from 'react-color';

class ColorPicker extends Component {

    static defaultProps = {
        onChangeComplete: null
    };

    constructor(props) {
        super(props);
        this.state = {
            color: props.color,
            visible: false
        };
    }

    render() {
        return (
            <div className="colorPicker">
                <div
                    className="colorPicker__btn"
                    onClick={() => {
                        this.setState(function (preState) {
                            return {
                                visible: !preState.visible
                            }
                        });
                    }}
                >
                    <div className="colorPicker__btn__color" style={{backgroundColor: this.state.color}}></div>
                </div>
                {
                    this.state.visible ?
                        <div className="colorPicker__content">
                            <div
                                onClick={() => {
                                    this.setState({
                                        visible: false
                                    });
                                }}
                                className="colorPicker__cover"
                            ></div>
                            <SketchPicker
                                color={this.state.color}
                                onChangeComplete={(color) => {
                                    var rgb = color.rgb;
                                    var rgba ='rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + rgb.a + ')';

                                    this.setState({
                                        color: rgba
                                    });
                                    this.props.onChangeComplete && this.props.onChangeComplete(color, rgba);
                                }}
                            />
                        </div>
                        : null
                }
            </div>
        );
    }

}

export default ColorPicker;
